Vue Js Call Multiple Function onclick event:In Vue.js, you can use the v-on directive to bind event listeners to DOM elements. When using the v-on directive to handle the onclick event, you can call multiple functions by separating them with a semicolon. This allows you to execute multiple actions when a user clicks on a particular element. For example, you could call a function to toggle a boolean value and another function to update a data property, all within the same onclick event handler. By using the v-on directive with multiple functions, you can create more flexible and responsive user interfaces in your Vue.js applications.
How can I call multiple functions in Vue js when an onclick event is triggered?
When the button is clicked, firstMethod() updates the value of result1 to “First method called” and secondMethod() updates the value of result2 to “Second method called”. Both of these values are displayed below the button using the {{ }} syntax.
So when the button is clicked, both firstMethod() and secondMethod() are executed, and their respective results are displayed below the button.
Vue Js Call Multiple Function onclick event Example
<div id="app">
<button @click="firstMethod(); secondMethod()">Click me</button>
<small>{{result1}}</small>
<small>{{result2}}</small>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
resutl1: '',
result2: ''
}
},
methods: {
firstMethod() {
this.result1 = "First method called";
},
secondMethod() {
this.result2 = "Second method called";
},
},
})
app.mount('#app')
</script>
Output of Vue Js Call Multiple Function onclick event
